<template>
  <div class="materialLibrary page">
    <div class="filter">
      <el-input
        v-model="searchKey"
        placeholder="搜索剧本素材"
        style="width: 400px"
      >
        <template #suffix>
          <i class="el-icon-search" @click="search()"></i>
        </template>
      </el-input>
    </div>
    <div class="listCont">
      <div class="list" v-for="(item, index) in list" :key="index">
        <div class="file">
          <img :src="(item.mediaExtension=='docx'?require('@/assets/img/docx.png'):require('@/assets/img/fileder.png'))" />
        </div>
        <p>{{item.mediaName}}</p>
      </div>
    </div>
    <div style="text-align: center; margin-top: 20px">
      <el-pagination
        background
        v-model:currentPage="currentPage1"
        :page-size="15"
        layout="total,  prev, pager, next,"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { MediaContentList } from "@/api/MediaContent";
export default {
  data() {
    return {
      currentPage1: 1,
      searchKey: "",
      list:[],
      total:0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      MediaContentList({mediaCatalogId:1}).then((res) => {
          this.list = res.data.list
          this.total = res.data.total
      });
    },
    handleSizeChange() {},
    handleCurrentChange() {},
  },
};
</script>
<style lang="scss" scoped>
.materialLibrary {
  background: #ffffff;
  box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
  border-radius: 4px;
  margin-bottom: 10px;
  padding-bottom: 20px;
  .filter {
    display: flex;
    justify-content: center;
    padding: 20px;
    border-bottom: 1px solid #e5e5e5;
    i {
      cursor: pointer;
    }
  }
  .listCont {
    padding: 20px 0;
    display: flex;
    flex-wrap: wrap;
    .list {
      margin: 20px 23px;
      .file {
        width: 152px;
        height: 152px;
        background: #f8f8f8;
        border: 1px solid #dedfe0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      p {
        font-weight: 400;
        color: #111111;
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
      }
    }
  }
}
</style>